<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对战投票</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    .table {
        margin: auto;
    }
    .btn-link {
        text-decoration: none;
    }
    .btn-link:hover {
        text-decoration: none;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
    .playerImg {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 1px solid #8a8a8a;
    }
    a:hover {
        text-decoration: none;
    }
    .voteTool {
        float: left;
        width: 30px;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="padding-top: 80px">

    <div class="jumbotron" style="height: 260px">
        <h1 class="display-3" id="matchName" th:text="${match.matchName}"></h1>
        <p class="lead" th:text="${match.matchTime}"></p>
        <p class="lead" th:text="${match.matchAddress}"></p>
        <input id="matchId" th:value="${match.matchId}" hidden="">
    </div>

    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse"
                            data-target="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                        已开启投票对战
                    </button>
                </h2>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                 data-parent="#accordionExample">
                <div class="card-body">
                    <div th:if="${battle.size()>0}">
                        <div th:each="battlePlayers:${battlePlayers}"
                             th:if="${battlePlayers.battleStatus}==1"
                             style="margin-top: 40px;width: 100%;display: flex;justify-content: center">
                            <div class="card" style="width: 30rem;float: left;">
                                <a title="查看对战详情"
                                   th:href="@{/userVote(battleId=${battlePlayers.battleId})}">
                                    <div class="card-body">
                                        <div class="media">
                                            <div class="media-body">
                                                <h6 th:text="${battlePlayers.playeraNumber}+'号-'
                                                +${battlePlayers.playeraName}"
                                                    class="mt-0 mb-1"></h6>
                                                <p th:text="${battlePlayers.playeraSong}"></p>
                                                <div class="progress" style="height: 20px">
                                                    <div class="progress-bar bg-primary"
                                                         th:Style="'width: '+${battlePlayers.playeraTicket}+'%'"
                                                         role="progressbar" aria-valuemin="0"
                                                         aria-valuemax="100"></div>
                                                    <p th:text="${battlePlayers.playeraTicket}" style=""></p>
                                                </div>
                                            </div>
                                            <img class="ml-3 playerImg" th:src="@{${battlePlayers.playeraImg}}" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="voteTool">
                                <a href="#">
                                    <img th:src="@{/img/vs.png}"
                                         style="width: 20px;height: 20px;">
                                </a>
                            </div>

                            <div class="card" style="width: 30rem;">
                                <a title="查看对战详情" th:href="@{/userVote(battleId=${battlePlayers.battleId})}">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 playerImg" th:src="@{${battlePlayers.playerbImg}}" alt="">
                                            <div class="media-body">
                                                <h6 th:text="${battlePlayers.playerbNumber}+'号-'+${battlePlayers.playerbName}"></h6>
                                                <p th:text="${battlePlayers.playerbSong}"></p>
                                                <div class="progress" style="height: 20px">
                                                    <div class="progress-bar bg-danger"
                                                         th:Style="'width: '+${battlePlayers.playerbTicket}+'%'"
                                                         role="progressbar" aria-valuemin="0"
                                                         aria-valuemax="100"></div>
                                                    <p th:text="${battlePlayers.playerbTicket}" style=""></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div th:if="${battle.size()<=0}">
                        <h2>当前比赛还没有开启投票的对战</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="accordionExample2">
        <div class="card">
            <div class="card-header" id="headingOne2">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne2"
                            aria-expanded="true" aria-controls="collapseOne">
                        未开启投票对战
                    </button>
                </h2>
            </div>

            <div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div th:if="${battle.size()>0}">
                        <div th:each="battlePlayers:${battlePlayers}" th:unless="${battlePlayers.battleStatus}==1"
                             style="margin-top: 40px;width: 100%;display: flex;justify-content: center">
                            <div class="card" style="width: 30rem;float: left;">
                                <a title="查看对战详情" th:href="@{/userVote(battleId=${battlePlayers.battleId})}">
                                    <div class="card-body">
                                        <div class="media">
                                            <div class="media-body">
                                                <h6 th:text="${battlePlayers.playeraNumber}+'-'+${battlePlayers.playeraName}"
                                                    class="mt-0 mb-1"></h6>
                                                <p th:text="${battlePlayers.playeraSong}"></p>
                                                <div class="progress" style="height: 20px;">
                                                    <div class="progress-bar bg-primary"
                                                         th:Style="'width: '+${battlePlayers.playeraTicket}+'%'"
                                                         role="progressbar" aria-valuemin="0"
                                                         aria-valuemax="100"></div>
                                                    <p th:text="${battlePlayers.playeraTicket}" style=""></p>
                                                </div>
                                            </div>
                                            <img class="ml-3 playerImg" th:src="@{${battlePlayers.playeraImg}}" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="voteTool">
                                <a href="#">
                                    <img th:src="@{/img/vs.png}"
                                         style="width: 20px;height: 20px;">
                                </a>
                            </div>

                            <div class="card" style="width: 30rem;">
                                <a title="查看对战详情" th:href="@{/userVote(battleId=${battlePlayers.battleId})}">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 playerImg" th:src="@{${battlePlayers.playerbImg}}" alt="">
                                            <div class="media-body">
                                                <h6 th:text="${battlePlayers.playerbNumber}+'-'+${battlePlayers.playerbName}"></h6>
                                                <p id="song" th:text="${battlePlayers.playerbSong}"></p>
                                                <div class="progress" style="height:20px">
                                                    <div class="progress-bar bg-danger"
                                                         th:Style="'width: '+${battlePlayers.playerbTicket}+'%'"
                                                         role="progressbar" aria-valuemin="0"
                                                         aria-valuemax="100"></div>
                                                    <p th:text="${battlePlayers.playerbTicket}" style=""></p>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div th:if="${battle.size()<=0}">
                        <h2>当前比赛还没有未开启投票的对战</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
</script>
</html>